<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        margin: 0;
    }

    .book{
        width: 600px;
        height: 400px;
        border: 1px solid black;
        margin: 20px;
        position: relative;

        perspective: 3000px;
    }

    .page{
        width: 300px;
        height: 400px;
        position: absolute;
        right: 0;
        top: 0;
        /* opacity: .3; */
    }

    .first{
        z-index: 2;

        transform-style: preserve-3d;
        transform: rotateY(0);
        transition: transform .8s ease-in-out;
        transform-origin: left center;
    }

    .first:hover{
        transform: rotateY(-180deg);
    }

    .first .page-item{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        /* opacity: .3; */
    }

    .front{
        z-index: 2;
        /* opacity: 0; */
    }

    .back{
        /* 将反面比正面低一层级，使得证明正常显示 */
        z-index: 1;

        /* transform-style: preserve-3d; */
        /* 延Z轴向后移动1px，这样翻转后反面可以看到 */
        transform: translateZ(-1px) rotateY(180deg);
    }
</style>
<body>
    <div class="book">
        <!-- 每一页分为前（正面）和 后（反面）两部分 -->
        <div class="page first">
          <!-- 每页正面  -->
          <div class="page-item front">
            <img src="/src/img/transform/cover1.jpg" alt="" />
          </div>
          <!-- 每页反面 -->
          <div class="page-item back">
            <img src="/src/img/transform/cover2.jpg" alt="" />
          </div>
        </div>
        <!-- 底页内页 -->
        <div class="page">
          <img src="/src/img/transform/front.jpg" alt="" />
        </div>
        <!-- 这个效果，不显示底页正面，所以不用绘制 -->
      </div>
</body>
</html>